
/* //得css值
var oBox = document.getElementById("fangda");
var middleImg = document.getElementById("middleImg")
var middleArea = document.getElementById("middleArea");
var bigImg = document.getElementById("bigImg");
var bigArea = document.getElementById("bigArea");
var oImgs = document.querySelectorAll("ul>li img");
//建立getStyle
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr]
    }
    return window.getComputedStyle(obj, null)[attr]
}
//给小区域新的值
var middleHeight = (middleImg.offsetHeight / parseFloat(getStyle(bigImg, "height"))) * parseFloat(getStyle(bigArea, "height"))
var middleWidth = (middleImg.offsetWidth / parseFloat(getStyle(bigImg, "width"))) * parseFloat(getStyle(bigArea, "width"))
middleArea.style.width = middleWidth + "px";
middleArea.style.height = middleHeight + "px";
//按照比例 移显示
var oScale = parseFloat(getStyle(bigArea, "width")) / parseFloat(getStyle(middleArea, "width"))
//移入
middleImg.onmouseenter = function () {
    bigArea.style.display = "block"
    middleArea.style.display = "block"
    middleImg.onmousemove = function (evt) {
        var e = evt || window.event;
        var mX = e.pageX - oBox.offsetLeft - middleImg.offsetLeft - middleArea.offsetWidth / 2;
        var mY = e.pageY - oBox.offsetTop - middleImg.offsetTop - middleArea.offsetHeight / 2;
        var nX = middleImg.offsetWidth - middleArea.offsetWidth //大图减去小区域的大小 剩下是小区域活动的范围
        var nY = middleImg.offsetHeight - middleArea.offsetHeight;
        if (mX <= 0) {
            mX = 0
        }
        if (mY <= 0) {
            mY = 0
        }
        if (mX >= nX) {
            mX = nX
        }
        if (mY >= nY) {
            mY = nY
        }
        middleArea.style.left = mX + "px";
        middleArea.style.top = mY + "px"

        bigImg.style.left = -mX * oScale + "px" //大图是绝对定位
        bigImg.style.top = -mY * oScale + "px";
    }
    middleImg.onmouseleave = function () {
        bigArea.style.display = "none";
        middleArea.style.display = "none"
    }
}
//点
for (var i = 0; i < oImgs.length; i++) {
    oImgs[i].tmpIndex = i + 1;
    oImgs[i].onclick = function () {
        middleImg.children[0].setAttribute("src", `./images/Wallpaper 0${this.tmpIndex}.jpg`)
        bigImg.setAttribute("src", `./images/Wallpaper 0${this.tmpIndex}.jpg`)
    }
} */
$(function () {
    var $fangda = $("#fangda");
    var $smallArea = $fangda.find("#middleArea");
    var $smallImg = $fangda.find("#middleImg");
    var $bigArea = $fangda.find("#bigArea");
    var $bigImg = $fangda.find("#bigImg");

    //小区域 = 小图/大图*大区域   宽高
    $smallArea.css("width", ($smallImg.width() / $bigImg.width()) * $bigArea.width());
    $smallArea.css("height", ($smallImg.width() / $bigImg.width()) * $bigArea.width());
    //比例 = 大区域/小区域
    var oSacel = $bigArea.width() / $smallArea.width();

    $smallImg.on("mouseenter", (evt) => {
        $smallArea.show();
        $bigArea.show();
        $smallImg.on("mousemove", (evt) => {
            var disX = evt.pageX - $smallImg.offset().left - $smallArea.width() / 2;
            var disY = evt.pageY - $smallImg.offset().top - $smallArea.height() / 2;
            if (disX <= 0) {
                disX = 0;
            }
            if (disY <= 0) {
                disY = 0;
            }
            if (disX >= $smallImg.width() - $smallArea.width()) {
                disX = $smallImg.width() - $smallArea.width();
            }
            if (disY >= $smallImg.height() - $smallArea.height()) {
                disY = $smallImg.height() - $smallArea.height();
            }
            $smallArea.css({
                left: disX,
                top: disY
            })
            $bigImg.css({
                left: -disX * oSacel,
                top: -disY * oSacel,
            })
        })

    }).on("mouseleave", () => {
        $smallArea.hide()
        $bigArea.hide()
    });
    //小图片的点击事件
    $("#small").on("click","img",function(){
        $smallImg.find("img").attr("src",$(this).attr("src"));
        $bigImg.attr("src", $(this).attr("src"));
    });
});